<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/网页展示/js/jquery-3.4.1.min.js"></script>
    <style>
        form span{
            color: red;
        }
        
    </style>
</head>

<body>
    <form onsubmit="return false">
        <!-- 提交事件 -->
        <fieldset style="width: 460px;">
            <!-- 加边框 表单语义化 -->
            <legend>用户注册
            </legend>
            账号：<input type="text" placeholder="请输入账号" class="user"><span></span><br>
            <!-- maxlength最大输入数  size是框框长度 -->
            账号：<input type="image" placeholder=""><br>
            账号：<input type="file"><input type="button" value="上传文件"><br>
            密码：<input type="password" placeholder="请输入密码" class="password"><br>
            生日：<input type="date" placeholder="请输入日期"><br>
            <!-- date是日期  datetime-local日期加时间 -->
            <!-- placeholder是提示信息 -->
            性别：<input type="radio" name="sex" checked>男
            <input type="radio" name="sex">女<br>
            部门：
            <select>
                <!-- 选择框 -->
                <option>---请选择---</option>
                <option>开发部</option>
                <option>测试部</option>
            </select><br>
            个人介绍：<br>
            <textarea name="" id="" cols="30" rows="10"></textarea><br>
            <input type="submit" onclick="val()">
            <input type="reset" value="重置">
            <!-- value可以不写 代表框里文字 -->
        </fieldset>

    </form>
    <script>
        function val() {
            let user = $('.user').val();
            let password = $('.password').val()
            // if(user.length<6 || user.length>12) {
            //     alert("账号不合法");
            //    return false;
            // }
            let arr = user.split("")
            for (let i in arr) {
                if (!isNaN(arr[i])) {
                    console.log($(this).next())
                    $('.user').next().html("不能包含数字")
                    break
                }
            }
        }
        //失去焦点
        $('.user').blur(function () {
            $('.user').css("background","red")
            val()
        })
        // $('.user').focus(function(){
        //     alert("输入账号")
        // })
    </script>
</body>

</html>